<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 23:08:36
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>
<script>
import {Column} from '@antv/g2plot';

export default {
  data() {
    return {
      dataArr:[
          {
            name: '1号设备',
            月份: 'Jan.',
            月均降雨量: 18.9,
          },
          {
            name: '1号设备',
            月份: 'Feb.',
            月均降雨量: 28.8,
          },
          {
            name: '1号设备',
            月份: 'Mar.',
            月均降雨量: 39.3,
          },
          {
            name: '1号设备',
            月份: 'Apr.',
            月均降雨量: 81.4,
          },
          {
            name: '1号设备',
            月份: 'May',
            月均降雨量: 47,
          },
          {
            name: '1号设备',
            月份: 'Jun.',
            月均降雨量: 20.3,
          },
          {
            name: '1号设备',
            月份: 'Jul.',
            月均降雨量: 24,
          },
          {
            name: '1号设备',
            月份: 'Aug.',
            月均降雨量: 35.6,
          },
          {
            name: '2号设备',
            月份: 'Jan.',
            月均降雨量: 12.4,
          },
          {
            name: '2号设备',
            月份: 'Feb.',
            月均降雨量: 23.2,
          },
          {
            name: '2号设备',
            月份: 'Mar.',
            月均降雨量: 34.5,
          },
          {
            name: '2号设备',
            月份: 'Apr.',
            月均降雨量: 99.7,
          },
          {
            name: '2号设备',
            月份: 'May',
            月均降雨量: 52.6,
          },
          {
            name: '2号设备',
            月份: 'Jun.',
            月均降雨量: 35.5,
          },
          {
            name: '2号设备',
            月份: 'Jul.',
            月均降雨量: 37.4,
          },
          {
            name: '2号设备',
            月份: 'Aug.',
            月均降雨量: 42.4,
          },
          
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart(){
      const column = new Column(this.$refs.left2_container, {
        data: this.dataArr,
        isGroup: true,
        xField: '月份',
        yField: '月均降雨量',
        seriesField: 'name',
        xAxis: {
          label: {
            rotate:-45,
            offset: 10,
          }
        },
        
        label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'middle', 'bottom'
            // 可配置附加的布局方法
            layout: [
              // 柱形图数据标签位置自动调整
              { type: 'interval-adjust-position' },
              // 数据标签防遮挡
              { type: 'interval-hide-overlap' },
              // 数据标签文颜色自动调整
              { type: 'adjust-color' },
            ],
          },
      });

      column.render();

    }
  }
}
</script>>